<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--参考地址 https://zhuanlan.zhihu.com/p/118354117 -->
		<style>
			.box {
			 display: inline-block;
			 background-color: rgba(0,0,255,.2);
			 border: 3px solid #00f;
			 width: 65px;
			 height: 65px;
			}
			
			.wrapper {
			 display: inline-block;
			 height: 150px;
			 background-color: lightgreen;
			}
			
			.output2 {
			 height: 250px;
			 overflow: auto;
			}
			
			.sticky {
			 position: sticky;
			 top: 20px;
			 background-color: #ff0;
			 border: 3px solid red;
			}
		</style>
	</head>
	<body>
		<div>
		        <section>
		            <div class="output2">
		                <p>In this demo you can control the <code>position</code> property for the yellow box.</p>
		                <div class="box"></div>
		                <div class="wrapper">
		                    <div class="box sticky"></div>
		                </div>
		                <div class="box"></div>
		                <p>To see the effect of <code>sticky</code> positioning, select the <code>position: sticky</code> option
		                    and scroll this container.</p>
		                <p>The element will scroll along with its container, until it is at the top of the container (or reaches
		                    the offset specified in <code>top</code>), and will then stop scrolling, so it stays visible.</p>
		                <p>The rest of this text is only supplied to make sure the container overflows, so as to enable you to
		                    scroll it and see the effect.</p>
		                <hr>
		                <p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy
		                    lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles
		                    is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly
		                    primitive that they still think digital watches are a pretty neat idea.</p>
		            </div>
		        </section>
		    </div>
		
		
	</body>
</html>